<template>
	<view class="publish">
		<!-- S 顶部导航 -->
		<sol-navbar title="编辑内容">
			<template v-slot:right>
				<image class="publish-naver_right-icon" src="/static/icon-default/icon_publish.png" mode="scaleToFill"
					@click="fnPublishEvent('open')">
				</image>
			</template>
		</sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 标题 -->
		<input class="publish-title" type="text" placeholder="标题" :maxlength="26" v-model="publish.title" />
		<!-- E 标题 -->

		<!-- S 内容编辑 -->
		<textarea class="publish-content" :auto-height="true" :show-confirm-bar="false" :maxlength="1000"
			:cursor-spacing="56" placeholder="点击这里编辑内容，你还可以通过下方的快捷按钮，插入图片或者语音。" v-model="publish.content" />
		<!-- E 内容编辑 -->

		<!-- S 编辑工具栏 -->
		<dynamic-publish-toolbar></dynamic-publish-toolbar>
		<!-- E 编辑工具栏 -->

		<!-- S 发布内容确认 -->
		<sol-drawer v-model="publishOpen" primary-text="确认发布" cancel-text="取消" @click="fnPublishEvent">
			<template v-slot:default>
				<view class="drawer">
					<text class="drawer-title">确认发布当前内容吗？</text>
					<text class="drawer-explain">请确认发布信息状态</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 发布内容确认 -->
	</view>
</template>

<script>
	export default {
		name: "Publish",
		data() {
			return {
				// 发布信息
				publish: {
					title: '',
					content: '',
				},
				// 发布内容确认
				publishOpen: false,
			};
		},
		computed: {},
		methods: {
			// 发布事件
			fnPublishEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.publishOpen = true;
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.publishOpen = false;
						break;
					case 'primary': // 确认
						this.$store.commit('setVuexStore', {
							name: 'vuex_form_data.isPublish',
							value: true
						})
						uni.navigateBack({
							delta: 1
						})
						break;
				}
			}

		}
	}
</script>

<style lang="scss">
	.publish {
		min-height: 100vh;
		background-color: $--color-background;

		// 顶部栏
		&-naver_right-icon {
			width: 48rpx;
			height: 44rpx;
			padding: 14rpx 28rpx 14rpx 24rpx;
			display: block;
			overflow: hidden;
		}

		&-title {
			font-size: 48rpx;
			font-weight: bold;
			// color: #BBBBBB;
			margin: 28rpx 28rpx 42rpx;
			border-bottom: 6rpx #4f575d solid;
			padding: 28rpx 0 42rpx;
			color: #DDDDDD;
			height: 68rpx;
		}

		&-content {
			min-height: 40vh;
			width: 92%;
			padding: 28rpx 28rpx 300rpx;
			letter-spacing: 4rpx;
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #DDDDDD;
		}

		// 发布说明
		.drawer {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			&-title {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 6rpx;
				margin-bottom: 18rpx;
			}

			&-explain {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
			}
		}
	}
</style>
